import React, { useState } from "react";
import {
  Modal,
  Tabs,
  Button,
  Upload,
  Input,
  Row,
  Col,
  Card,
  Typography,
} from "antd";
import {
  InboxOutlined,
  LinkOutlined,
  VideoCameraOutlined,
  PlayCircleOutlined,
} from "@ant-design/icons";

const { Dragger } = Upload;
const { Text } = Typography;

interface VideoMaterialSelectorProps {
  visible: boolean;
  onClose: () => void;
  onSelect: (filePath: string) => void;
  currentPath?: string;
}

const VideoMaterialSelector: React.FC<VideoMaterialSelectorProps> = ({
  visible,
  onClose,
  onSelect,
  currentPath,
}) => {
  const [activeTab, setActiveTab] = useState("upload");
  const [onlineUrl, setOnlineUrl] = useState("");

  // 模拟示例视频数据
  const exampleVideos = [
    {
      id: 1,
      title: "城市风景",
      thumbnail:
        "https://via.placeholder.com/200x120/4CAF50/white?text=城市风景",
      duration: "00:30",
      size: "15.2MB",
      path: "C:\\Videos\\city_landscape.mp4",
    },
    {
      id: 2,
      title: "自然风光",
      thumbnail:
        "https://via.placeholder.com/200x120/2196F3/white?text=自然风光",
      duration: "01:15",
      size: "28.5MB",
      path: "C:\\Videos\\nature_view.mp4",
    },
    {
      id: 3,
      title: "科技动画",
      thumbnail:
        "https://via.placeholder.com/200x120/FF9800/white?text=科技动画",
      duration: "00:45",
      size: "22.1MB",
      path: "C:\\Videos\\tech_animation.mp4",
    },
    {
      id: 4,
      title: "人物采访",
      thumbnail:
        "https://via.placeholder.com/200x120/9C27B0/white?text=人物采访",
      duration: "02:30",
      size: "45.8MB",
      path: "C:\\Videos\\interview.mp4",
    },
    {
      id: 5,
      title: "产品展示",
      thumbnail:
        "https://via.placeholder.com/200x120/F44336/white?text=产品展示",
      duration: "01:00",
      size: "18.7MB",
      path: "C:\\Videos\\product_demo.mp4",
    },
    {
      id: 6,
      title: "抽象背景",
      thumbnail:
        "https://via.placeholder.com/200x120/607D8B/white?text=抽象背景",
      duration: "00:20",
      size: "8.9MB",
      path: "C:\\Videos\\abstract_bg.mp4",
    },
  ];

  // 上传组件配置
  const uploadProps = {
    name: "file",
    multiple: false,
    accept: ".mp4,.avi,.mov,.wmv,.flv,.mkv",
    showUploadList: false,
    beforeUpload: (file: any) => {
      // 这里暂时只模拟选择文件，不实际上传
      const filePath = `C:\\Videos\\${file.name}`;
      onSelect(filePath);
      onClose();
      return false; // 阻止自动上传
    },
  };

  // 处理在线网址确认
  const handleOnlineUrlConfirm = () => {
    if (onlineUrl.trim()) {
      onSelect(onlineUrl);
      onClose();
    }
  };

  // 处理示例视频选择
  const handleExampleVideoSelect = (videoPath: string) => {
    onSelect(videoPath);
    onClose();
  };

  // 渲染上传标签页
  const renderUploadTab = () => (
    <div style={{ padding: "20px" }}>
      <Dragger {...uploadProps} style={{ marginBottom: "20px" }}>
        <p className="ant-upload-drag-icon">
          <InboxOutlined style={{ fontSize: "48px", color: "#1890ff" }} />
        </p>
        <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
        <p className="ant-upload-hint">
          支持单个文件上传。支持格式：MP4、AVI、MOV、WMV、FLV、MKV
        </p>
      </Dragger>

      <div style={{ textAlign: "center", color: "#666" }}>
        <Text type="secondary">
          💡 提示：上传的视频文件将保存到本地项目文件夹中
        </Text>
      </div>
    </div>
  );

  // 渲染在线网址标签页
  const renderOnlineTab = () => (
    <div style={{ padding: "20px" }}>
      <div style={{ marginBottom: "20px" }}>
        <Text strong style={{ display: "block", marginBottom: "8px" }}>
          视频网址
        </Text>
        <Input
          placeholder="请输入在线视频网址（如：https://example.com/video.mp4）"
          value={onlineUrl}
          onChange={(e) => setOnlineUrl(e.target.value)}
          prefix={<LinkOutlined />}
          style={{ marginBottom: "12px" }}
        />
        <Button
          type="primary"
          onClick={handleOnlineUrlConfirm}
          disabled={!onlineUrl.trim()}
          style={{ width: "100%" }}
        >
          确认使用此网址
        </Button>
      </div>

      {/* 预览区域（模拟） */}
      {onlineUrl && (
        <div
          style={{
            border: "1px dashed #d9d9d9",
            borderRadius: "6px",
            padding: "20px",
            textAlign: "center",
            backgroundColor: "#fafafa",
          }}
        >
          <VideoCameraOutlined
            style={{ fontSize: "48px", color: "#bbb", marginBottom: "12px" }}
          />
          <div style={{ color: "#666" }}>
            <Text>视频预览区域</Text>
            <br />
            <Text type="secondary" style={{ fontSize: "12px" }}>
              网址：{onlineUrl}
            </Text>
          </div>
        </div>
      )}

      <div style={{ marginTop: "16px", textAlign: "center", color: "#666" }}>
        <Text type="secondary">
          💡 提示：支持大部分在线视频网址，请确保网址可访问
        </Text>
      </div>
    </div>
  );

  // 渲染示例视频标签页
  const renderExampleTab = () => (
    <div style={{ padding: "20px", maxHeight: "400px", overflowY: "auto" }}>
      <Row gutter={[16, 16]}>
        {exampleVideos.map((video) => (
          <Col xs={24} sm={12} md={8} key={video.id}>
            <Card
              hoverable
              size="small"
              cover={
                <div
                  style={{
                    position: "relative",
                    height: "120px",
                    background: `url(${video.thumbnail}) center/cover`,
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                  }}
                >
                  <PlayCircleOutlined
                    style={{
                      fontSize: "32px",
                      color: "rgba(255, 255, 255, 0.8)",
                      background: "rgba(0, 0, 0, 0.5)",
                      borderRadius: "50%",
                      padding: "8px",
                    }}
                  />
                  <div
                    style={{
                      position: "absolute",
                      bottom: "4px",
                      right: "4px",
                      background: "rgba(0, 0, 0, 0.7)",
                      color: "white",
                      padding: "2px 6px",
                      borderRadius: "3px",
                      fontSize: "11px",
                    }}
                  >
                    {video.duration}
                  </div>
                </div>
              }
              onClick={() => handleExampleVideoSelect(video.path)}
              style={{ cursor: "pointer" }}
            >
              <Card.Meta
                title={
                  <Text
                    style={{ fontSize: "13px" }}
                    ellipsis={{ tooltip: video.title }}
                  >
                    {video.title}
                  </Text>
                }
                description={
                  <div style={{ fontSize: "11px", color: "#999" }}>
                    <div>大小：{video.size}</div>
                    <div>格式：MP4</div>
                  </div>
                }
              />
            </Card>
          </Col>
        ))}
      </Row>

      <div style={{ marginTop: "20px", textAlign: "center", color: "#666" }}>
        <Text type="secondary">
          💡 提示：点击任意示例视频即可使用，这些是预设的示例文件
        </Text>
      </div>
    </div>
  );

  const tabItems = [
    {
      key: "upload",
      label: (
        <span>
          <InboxOutlined />
          上传素材
        </span>
      ),
      children: renderUploadTab(),
    },
    {
      key: "online",
      label: (
        <span>
          <LinkOutlined />
          在线网址
        </span>
      ),
      children: renderOnlineTab(),
    },
    {
      key: "example",
      label: (
        <span>
          <VideoCameraOutlined />
          示例视频
        </span>
      ),
      children: renderExampleTab(),
    },
  ];

  return (
    <Modal
      title="选择视频素材"
      open={visible}
      onCancel={onClose}
      footer={null}
      width={800}
      destroyOnHidden={true}
      centered
    >
      <Tabs
        activeKey={activeTab}
        onChange={setActiveTab}
        items={tabItems}
        size="small"
      />
    </Modal>
  );
};

export default VideoMaterialSelector;
